<template>
  <div class="table-all">
    <!-- 搜索区 -->
    <div class="app-container search-box">
      <SearchForm
        :form="searchData.form"
        :options="searchData.options"
        @searchUpdate="search"
        @resetSearchData="resetSearchData"
      ></SearchForm>
    </div>
    <!-- 按钮区 -->
    <div class="app-container table-box">
      <div class="table-main">
        <!-- 表格 -->
        <v-table
          title="巡查人员信息"
          v-if="tableMainHeight>0"
          :table-columns="tableColumns"
          :table-data="tableData"
          :loading="loading"
          :is-index="false"
          ref="table"
          :maxHeight="tableMainHeight">
          <template #topButtonList>
            <ButtonForm :buttonList="buttonList" @clickButton="clickButton"></ButtonForm>
          </template>
          <template #gender="scope">
            {{getDictValue(scope.row.gender, sexOptions)}}
          </template>
        </v-table>
      </div>
      <div class="table-page">
        <!-- 页码 -->
        <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize"
                    @pagination="search"/>
      </div>
    </div>

  </div>
</template>

<script>
  import { patrolPatrolPersonList, patrolPersonExport  } from '@/api/risk/patrol'
  import SearchForm from '@/components/searchForm/index'
  import ButtonForm from '@/components/ButtonForm/index'
  import VTable from '@/components/VTable/index'
  import Pagination from '@/components/Pagination/index'
  export default {
    components:{
      VTable,Pagination,SearchForm,ButtonForm
    },
    data(){
      return{
        tableColumns:[
          {
            prop: 'unitName',
            label: '所属单位',
            minWidth: '150',
            slotname: 'unitName',
            options: {}
          },
          {
            prop: 'name',
            label: '姓名',
            minWidth: '150',
            slotname: 'name',
            options: {}
          },
          {
            prop: 'gender',
            label: '性别',
            minWidth: '150',
            slotname: 'gender',
            options: {}
          },
          {
            prop: 'identityNo',
            label: '身份证号',
            minWidth: '150',
            slotname: 'identityNo',
            options: {}
          },
          {
            prop: 'phone',
            label: '联系电话',
            minWidth: '150',
            slotname: 'phone',
            options: {}
          },
          // {
          //   prop: 'address',
          //   label: '住址',
          //   minWidth: '150',
          //   slotname: 'address',
          //   options: {}
          // },
          {
            prop: 'patrolNum',
            label: '巡查次数',
            minWidth: '150',
            slotname: 'patrolNum',
            options: {}
          },
          {
            prop: 'lastPatrolTime',
            label: '最近巡查日期',
            minWidth: '150',
            slotname: 'lastPatrolTime',
            options: {}
          },
        ],
        tableData:[],
        selection: [],
        loading:false,
        total:1,
        pageNum:1,
        pageSize:10,
        dict:{},
        searchData:{
          form:{
            name:'',
            unitName:''
          },
          options:[
            {
              title:'姓名',
              key: "name",
              type: "text",
            },
            {
              title:'所属单位',
              key: "unitName",
              type: "text",
            }
          ]
        },
        sexOptions:[],
        buttonList:[
          {name:'导出数据',methods:'exportInfo',type:'primary', hasPremission:["personnel:export"]},
        ],
        tableMainHeight: 0,
      }
    },
    watch: {

    },
    methods:{
      getDictValue(value,option){
        let item = option.find(t=> t.value == value)
        if(item!=undefined){
          return item.label
        }
        return value
      },
      exportInfo(){
        let params = {
          ...this.searchData.form
        }
        params.deptId = this.$store.state.account.user.deptId
        patrolPersonExport(params,`巡查人员_${new Date().getTime()}.xlsx`);
      },
      search(){
        this.fetch({
          ...this.searchData.form,
        })
      },
      fetch(params={}){
        params.pageSize = this.pageSize
        params.pageNum = this.pageNum
        console.log("当前人员信息",this.$store.state.account.user)
        params.deptId = this.$store.state.account.user.deptId
        this.loading = true
        patrolPatrolPersonList(params).then(async res=>{
          if(res.code==200){
            this.total = res.data.total
            this.tableData = res.data.rows
          }else{
            this.$message({
              message: this.$t('tips.systemException'),
              type: 'error'
            })
          }
        }).finally(final=>{
          this.loading = false
        })
      },
      // 重置搜索条件
      resetSearchData(){
        this.searchData.form = {
          unitName:"",
          name:""
        }
      },
      // 触发按钮区域按钮方法
      clickButton(methods){
        this[methods]()
      },
    },
    activated(){
      this.fetch()
    },
    created(){
      this.sexOptions = []
      this.$commonJs.filterDataDict("sex",this.sexOptions)
    },
    mounted(){
      this.tableMainHeight = document.getElementsByClassName('table-main')[0].clientHeight - 44 //减去顶部按钮列表的高度
    }
  }
</script>

<style lang="scss" scoped>
  .table-all {
    display: flex;
    flex-direction: column;
    height: 100%;

    .search-box {
      padding-bottom: 6px;
    }

    .table-box {
      padding-top: 10px;
      flex: 1;
      display: flex;
      flex-direction: column;

      .table-main {
        flex: 1;
        overflow: auto;
      }

      .table-page {
        // padding-top: 10 px;
        // padding-bottom: 10 px;
      }

      ::v-deep .pagination-container {
        text-align: right;
      }

    }
  }
</style>
